<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page pageEncoding="utf-8" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新青年宠物销售平台</title>
    <%@include file="./common/header.jsp"%>
</head>
<body>
<jsp:include page="./common/nav.jsp">
    <jsp:param name="backgroud" value="/img/pet/top-cat-1.jpg"/>
</jsp:include>
<div class="main">
    <nav>
    <ol itemscope="" itemtype="https://schema.org/BreadcrumbList" class="breadcrumb">
        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
            <a itemprop="item" href="${pageContext.request.contextPath}/index.action">
                <span itemprop="name">首页</span>
            </a>
            <meta itemprop="position" content="1">
        </li>
        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="active">
            <span itemprop="name">宠物搜索-猫猫</span>
            <meta itemprop="position" content="2">
        </li>
    </ol>
    </nav>

    <div class="coo-title">
        <h1 class="coo-hd-tittle">宠物搜索-猫咪</h1>
    </div>
    <hr>
    <div class="container mb-2">
        <p class="coo-text-brown text-right">现在有 <strong class="coo-text-orange">${countcats}只</strong> 猫咪,当前是第<strong class="coo-text-orange">${countcatspage}</strong>页。</p>
    </div>
    <div class="container tim-container">
        <p class="coo-text-brown">新青年宠物店可爱的猫猫们。如果您这里没有您要找的种类，请联系我们的赵纬和洪树军，我们为您寻找您心仪的猫猫。</p>
        <p class="coo-text-brown">并且，新青年宠物店内母猫生的小猫咪也接受预约。请按下面的按钮了解店内小猫咪的出生信息。</p>
        <div class="space-30"></div>

        <div class="row pt-2">
            <c:forEach items="${morecats}" var="morecats">

                <div class="col-md-3">
                    <div class="thumbnail"><img src="${pageContext.request.contextPath}${morecats.imagePath}" alt="${morecats.name} - No.${morecats.queryNumber} image">
                        <div class="caption">
                            <span class="label ${morecats.sub == 1 ? 'label-danger' : 'label-success'}">${morecats.sub == 1 ? '已预约' : '未预约'}</span>
                            <h5 class="coo-text-green text-center">${morecats.name}</h5>
                            <p class="coo-text-lightbrown">【查询号码】${morecats.queryNumber}<br>【性別】${morecats.gender}<br>【生日】${morecats.birthday}<br>【价格】${morecats.price}</p>
                            <button  name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" onclick="window.location.href='${pageContext.request.contextPath}/catsDetails.action?petdetail=${morecats.queryNumber}'"  >点击详情 »</button>
                        </div>
                    </div>
                </div>

            </c:forEach>


        </div>

    </div>


    <div class="text-center">
        <div style="display:inline-flex">
            <button type="button" class="btn btn-sm btn-info btn-fill mr-1"  onclick="window.location.href='${pageContext.request.contextPath}/morecats.action'">«</button>
            <c:set var="loopCount" value="${Math.ceil(countcats/ 8)}"/>
            <c:forEach begin="1" end="${loopCount}" varStatus="loop">
                <button type="button" class="btn btn-sm btn-info btn-fill mr-1" onclick="window.location.href='${pageContext.request.contextPath}/morecats.action?catsspage=${loop.count}'">${loop.count}</button>
            </c:forEach>

            <button type="submit" class="btn btn-sm btn-info btn-fill mr-1" name="others" onclick="window.location.href='${pageContext.request.contextPath}/morecats.action?catsspage=${Integer.toString(Math.ceil(countcats / 8))}'">»</button>
        </div>
        <div class="space-30"></div>
    </div>
</div>
<%@include file="./common/footer.jsp"%>
<%@include file="./common/js.jsp"%>
</body>
</html>